<template>
    <div class="banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item @click="changeId(i.jump_value)" v-for="i in banner" :key="i.id"><img :src="i.img" alt="" /></van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
import { myBanner } from "../request/index.js";
export default {
    data() {
        return {
            banner: [],
        };
    },
    created() {
        this.getBanner();
    },
    methods: {
        changeId(x) {
            let id = x.substr(19, 5);
            this.$router.push({ name: "detailpage", params: { id: id } });
        },
        getBanner() {
            myBanner().then((data) => {
                this.banner = data.data;
                this.banner = this.banner.filter((data) => {
                    return data.jump_type != 3;
                });
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.banner {
    width: 100%;
    img {
        width: 100%;
        height: 100%;
        border-radius: 0.1875rem;
    }
}
.my-swipe {
    height: 12.5rem;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 1.25rem;
    text-align: center;
}
</style>
